<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/mui/css/mui.min.css">
    <link rel="stylesheet" href="./lib/fa/css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/search.css">
    <link rel="stylesheet" href="./css/searchList.css">
</head>
<!-- layout：布局 -->
<div class="lt-layout">
    <!-- 头部 -->
    <header class="lt-header">
        <a href="./index.html" class="home"><i class="fa fa-chevron-left"></i></a>
        <h4>商品列表</h4>
    </header>

    <!-- 主体 -->
    <section class="lt-main">
        <!-- 区域滚动 -->
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <!-- 搜索头部 搜索框 -->
                <div class="search-head">
                    <input type="text" class="search-txt" placeholder="请输入搜索关键字" name="" id="">
                    <button class="search-btn mui-btn-primary">搜索</button>
                </div>

                <!-- 排序模块 -->
                <div class="lt-sort">
                    <a href="#">上架时间 <i class="fa fa-angle-down"></i> </a>
                    <a href="#" data-type="price">价格 <i class="fa fa-angle-down"></i> </a>
                    <a href="#" data-type="num">库存 <i class="fa fa-angle-down"></i> </a>
                    <a href="#">折扣 <i class="fa fa-angle-down"></i> </a>

                </div>
                <!-- 产品区域 -->
                <div class="lt-product">
                    <!-- 挖了个坑 -->
                    <div class="loading"></div>
                </div>

            </div>
        </div>
    </section>


    <!-- 底部 -->
    <footer class="lt-footer">
        <ul>
            <li>
                <a href="./index.html">
                    <i class="fa fa-home"></i>
                    <p>首页</p>
                </a>
            </li>
            <li>
                <a href="./category.html">
                    <i class="fa fa-align-justify "></i>
                    <p>分类页</p>
                </a>
            </li>
            <li>
                <a href="./cart.html">
                    <i class="fa fa-shopping-cart "></i>
                    <p>购物车</p>
                </a>
            </li>
            <li>
                <a href="./user.html">
                    <i class="fa fa-user "></i>
                    <p>用户中心</p>
                </a>
            </li>
        </ul>
    </footer>
</div>

<body>
    <script type="text/html" id="tmp">
      <ul>
            {{ each data v i }}
            <li class="lt-product_item">
                <!-- 根据id来渲染 -->
                <a href="product.html?productId={{ v.id }}">
                    <img src="{{ v.pic[0].picAddr }}" alt=""> 
                    <p class='info mui-ellipsis-2'>{{ v.proName }}</p>
                    <p>
                        <span  class='price' >￥{{ v.price }}</span>
                        <span  class='oldPrice' >￥{{ v.oldPrice }}</span>
                    </p>
                    <button class='mui-btn mui-btn-primary'> 立即购买 </button>
                </a>
            </li>
        {{ /each }}
      </ul>  
    </script>
    <script src="./lib/zepto/zepto.min.js"></script>
    <script src="./lib/mui/js/mui.js"></script>
    <script src="./lib/artTemplate/template-web.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/searchList.js"></script>
</body>

</html>